<!-- 导入弹出框 -->
<template>
  <a-modal
    :width="'80%'"
    :visible="dialogVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
    title-align="center"
  >
    <template #title> {{ props.title }} </template>

    <div class="wrap">
      <a-button type="outline" @click="getExportSettingData"
        >请选择要导入的字段</a-button
      >
      <a-upload
        style="margin-top: 20px"
        action="/"
        @change="onChange"
        @success="success"
        @error="error"
        :tip="tip"
        :auto-upload="false"
        @before-upload="beforeUpload"
        ref="uploadRef"
      />
    </div>
    <ExportControlSetting
      v-model:visible="exportSettingVisible"
      title="选择导入字段"
      :result-list="currHeaderList"
      @headerSave="headerSave"
      :forbidList="props.forbidList"
      :forbidSelectedList="props.forbidSelectedList"
    >
    </ExportControlSetting>
  </a-modal>
</template>

<script lang="ts" setup>
import { Message, Modal } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean; // 判断是否打开表头设置抽屉
    title: string; // 标题
    func?: (params?: any) => any; // 请求控件的函数
    headerList?: any; // 所有控件
    forbidList?: string[]; // 必选的表头
    forbidSelectedList?: string[]; // 禁止选择的表头
  }>(),
  {
    visible: false,
    title: '导入'
  }
);

const emits = defineEmits(['update:visible', 'importSave', 'importHeaderSave']);

// 判断抽屉是否显示
const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  }
});

let exportSettingVisible = ref(false);
let currHeaderList = ref(); // 接口获取过来的原始表头数据

// 获取当前模块的表头数据
const getExportSettingData = async () => {
  try {
    // const { header } = await props.func();
    currHeaderList.value = cloneDeep(props.headerList);
    exportSettingVisible.value = true;
  } catch (error: unknown) {
    console.log(error);
  }
};

// 表头设置返回的自定义事件
const headerSave = async (used: any, userId: number) => {
  try {
    emits('importHeaderSave', used, userId);
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

const tip = `只能上传单个文件`;

let uploadRef = ref();

// 储存当前文件
let currFile = ref<any>({
  uid: '-1',
  name: '',
  url: ''
});

// 文件上传
const onChange = async (_, currentFile: any) => {
  try {
    currFile.value = {
      ...currentFile
      // url: URL.createObjectURL(currentFile.file),
    };
    // console.log(currFile.value);

    // let temp = new FormData();
    // temp.append('data', currentFile.file);
    // uploadRef.value.submit();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 上传之间校验
const beforeUpload = (file: any) => {
  return new Promise((resolve, reject) => {
    Modal.confirm({
      title: 'beforeUpload',
      content: `确认上传 ${file.name}`,
      onOk: () => resolve(true),
      onCancel: () => reject('cancel')
    });
  });
};

// 成功时候调用
const success = (fileItem: any) => {
  Message.success('上传文件成功！');
};

// 失败的时候调用
const error = (fileItem: any) => {
  Message.error('上传文件失败，请重新上传！ ');
};

// 确认
const handleOk = () => {
  dialogVisible.value = false;
  // 获取当前用户的id
  // const userId: any = +(localStorage.getItem('userId') as string);
  emits('importSave', currFile.value);
  // dialogVisible.value = false;
};

// 取消
const handleCancel = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="less"></style>
